<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:text-transform="http://www.w3.org/1999/xhtml">
<!--#.头部样式-->
<head th:fragment="header(title)">
    <!-- Jenkins Deploy 晚上-->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- /*Favicons*/ -->
    <link rel="apple-touch-icon" th:href="@{/assets/images/index/apple-icon.png}">
    <link rel="icon" th:href="@{/assets/images/index/favicon.png}">
    <title th:text="${title}"></title>
    <!--/*前端框架样式依赖开始*/-->
    <link rel="stylesheet" th:href="@{/assets/plugins/material-kit/assets/css/material-kit.min.css}">
    <!-- Our project just needs Font Awesome Solid + Brands -->
    <!--<link rel="stylesheet" th:href="@{/assets/plugins/font-awesome/css/fontawesome.min.css}">
    <link rel="stylesheet" th:href="@{/assets/plugins/font-awesome/css/brands.min.css}">
    <link rel="stylesheet" th:href="@{/assets/plugins/font-awesome/css/solid.min.css}">-->

    <!--/*pace样式*/-->
    <link href="https://cdn.bootcss.com/pace/1.0.2/themes/black/pace-theme-minimal.min.css" rel="stylesheet">
    <!--/*回到最顶部(totop)插件*/-->
    <link rel="stylesheet" media="screen,projection" th:href="@{/assets/plugins/jquery_totop_plugin/css/ui.totop.css}"/>
    <!--/*分页插件样式*/-->
    <link rel="stylesheet" th:href="@{/assets/plugins/jquery_pagination/pagination.css}">
    <!--/*jquery-widgets 样式*/-->
    <link type="text/css" rel="Stylesheet"
          th:href="@{/assets/plugins/jqwidgets-ver5.7.2/jqwidgets/styles/jqx.base.css}"/>
    <!--/*树形分类插件*/-->
    <link href="https://cdn.bootcss.com/zTree.v3/3.5.40/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/assets/css/index/outlook_tree.css}" type="text/css">
    <!--/*步骤插件*/-->
    <link th:href="@{/assets/plugins/smartwizard/dist/css/smart_wizard.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/assets/plugins/smartwizard/dist/css/smart_wizard_theme_circles.min.css}" rel="stylesheet"
          type="text/css"/>
    <link th:href="@{/assets/plugins/smartwizard/dist/css/smart_wizard_theme_arrows.min.css}" rel="stylesheet"
          type="text/css"/>
    <link th:href="@{/assets/plugins/smartwizard/dist/css/smart_wizard_theme_dots.min.css}" rel="stylesheet"
          type="text/css"/>
    <!--/*动画效果样式*/-->
    <link th:href="@{/assets_admin/css/animate.css}" rel="stylesheet"/>
    <!--/*<link href="https://cdn.bootcss.com/animate.css/3.6.2/animate.css" rel="stylesheet">*/-->

    <!--/*toastr*/-->
    <link href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
    <!--/*博客页面通用样式*/-->
    <link rel="stylesheet" th:href="@{/assets/css/blog_common.css}">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@1.11.2/dist/jquery.min.js"></script>
    <!--/*fontawsome字体*/-->
    <script src="https://cdn.bootcss.com/font-awesome/5.6.3/js/fontawesome.min.js"></script>
    <script src="https://cdn.bootcss.com/font-awesome/5.6.3/js/brands.min.js"></script>
    <script src="https://cdn.bootcss.com/font-awesome/5.6.3/js/solid.min.js"></script>
    <!--/*博客通用js*/-->
    <!--/*toastr*/-->
    <script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>
    <!--/*弹出框layer依赖*/-->
    <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
    <script type="text/javascript" th:src="@{/assets/js/blog-common.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/blog-util.js}"></script>
</head>

<body>
<!--#.导航条-->
<nav th:fragment="navbar" class="navbar navbar-color-on-scroll navbar-transparent  fixed-top  navbar-expand-lg "
     color-on-scroll="100"
     id="sectionsNav">
    <div class="container">
        <div class="navbar-translate">
            <a href="blog/index.html" th:href="@{/}">
                <!-- <svg class="alibaba-icon" style="font-size: 42px;">
                     <use xlink:href="#icon-China"></use>
                 </svg>-->
                <img src="../static/assets/images/index/site_logo.png" th:src="@{/assets/images/index/site_logo.png}"
                     style="width: 200px;height: 50px;    ">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false"
                    aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                <span class="navbar-toggler-icon"></span>
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" th:href="@{/}">
                        <span><i class="fas fa-home fa-lg"></i>首页</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" th:href="@{/blog/archive.html}">
                        <i class="fas fa-archive fa-lg"></i><span> 时间归档</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" th:href="@{/blog/about.html}">
                        <i class="fas fa-user-secret fa-lg"></i><span>关于博主</span>
                    </a>
                </li>
                <li class="dropdown nav-item">
                    <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
                        <i class="fa fa-th fa-lg"></i> <span>更多功能</span>
                    </a>
                    <div class="dropdown-menu dropdown-with-icons">
                        <a href="http://demos.creative-tim.com/material-kit/docs/2.0/getting-started/introduction.html"
                           target="_blank"
                           class="dropdown-item">
                            <i class="fa fa-book fa-lg"></i><span> Material-Kit官方手册</span>
                        </a>
                        <a href="http://www.kiwipeach.cn/blog/detail/107"
                           target="_blank"
                           class="dropdown-item">
                            <i class="fa fa-book fa-lg"></i><span> 本站快速开始教程</span>
                        </a>
                    </div>
                </li>
                <li class="nav-item">
                    <!--<a class="nav-link" href="https://gitee.com/kiwipeach/nice-blog-sys" target="_blank">
                        <i class="fas fa-fax fa-lg"></i><span>源码</span>
                    </a>-->
                    <a class="nav-link" href='https://gitee.com/KiWiPeach/nice-blog-sys/stargazers' target="_blank"><img
                            src='https://gitee.com/KiWiPeach/nice-blog-sys/badge/star.svg?theme=dark' alt='star'></img></a>
                </li>
            </ul>
        </div>
    </div>
    <a href="https://gitee.com/kiwipeach/nice-blog-sys" target="_blank" title="Fork My Project">
        <img src="https://gitee.com/KiWiPeach/nice-blog-sys/widgets/widget_1.svg" width="70" height="70"
             viewBox="0 0 250 250"
             style="fill:#fff;color:#9c27b0;position: absolute;top: 0;border: 0;left: 0; -moz-transform:rotate(270deg); -webkit-transform:rotate(270deg); transform:rotate(270deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);">
    </a>
</nav>


<!--#.页面顶部banner-->
<div th:fragment="banner(blogCount,tagCount,categoryCount,commentReplyComment,formateNowDate)" class="card">
    <div class="card-body">
        <h4 class="card-title text-center">
            <a href="javascript:;" style="color: grey">博文统计：本站博客共【<span class="text-dark"
                                                                        th:text="${blogCount}">100</span>】个，分类【<span
                    class="text-dark" th:text="${categoryCount}">10</span>】个，标签【<span class="text-dark"
                                                                                      th:text="${tagCount}">16</span>】个，当前日期:<span
                    class="text-dark" th:text="${formateNowDate}">2018年05月19日 星期六 10:54:29</span></a>
        </h4>
    </div>
</div>

<!--#.大图文字 node_modules/material-kit/assets/img/kit/bg2.jpg-->
<!--背景图片http://img.kiwipeach.cn/product-card-resharper-2018-3@2x.png-->
<div th:fragment="background" class="page-header header-filter clear-filter big_bg" style="height: 40vh;"
     th:style="'height: 40vh;background-size:100% 200%;background-image:url(http://img.kiwipeach.cn/product-card-goland-2018-3.png)'">
    <div class="container">
        <div class="row">
            <div class="col-md-8 ml-auto mr-auto">
                <div class="brand">
                    <h4>“只要学不死，就往死里学！”</h4>
                </div>
            </div>
        </div>
    </div>
</div>

<!--#.右侧导航-分类、标签、橱窗、友链-->
<div th:fragment="side_bar_common">
    <!--分类信息:begin-->
    <div class="card">
        <h4 href="#" class="list-group-item" style="color: #0e0e0e">
            分类
        </h4>
        <div class="card-body">
            <ul id="treeDemo" class="ztree"></ul>
        </div>
    </div>
    <script type="text/javascript" src="../../static/assets/plugins/ztree/js/jquery.ztree.all.min.js"
            th:src="@{/assets/plugins/ztree/js/jquery.ztree.all.min.js}"></script>
    <script type="text/javascript">
        blog_common.plugin.blog_category_tree.init($("#treeDemo"));
    </script>
    <!--分类信息:end-->
    <!--标签云部分:begin-->
    <div class="card">
        <h4 href="#" class="list-group-item" style="color: #0e0e0e">
            标签云
        </h4>
        <div class="card-body">
            <div id="blog_tag_cloud_div">
            </div>
        </div>
    </div>
    <!--/*jquery-widgets 依赖脚本*/-->
    <script type="text/javascript" th:src="@{/assets/plugins/jqwidgets-ver5.7.2/jqwidgets/jqxcore.js}"></script>
    <script type="text/javascript" th:src="@{/assets/plugins/jqwidgets-ver5.7.2/jqwidgets/jqxdata.js}"></script>
    <script type="text/javascript" th:src="@{/assets/plugins/jqwidgets-ver5.7.2/jqwidgets/jqxtagcloud.js}"></script>
    <script type="text/javascript">
        blog_common.plugin.jqxtagcloud.init($('#blog_tag_cloud_div'));
    </script>
    <!--标签云部分:end-->

    <!--橱窗位置:begin-->
    <div class="card card-raised card-carousel">
        <div class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class=""></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1" class=""></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2" class="active"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item">
                    <img class="d-block w-100" src="http://img.kiwipeach.cn/bg3.jpg"
                         alt="First slide">
                    <div class="carousel-caption d-none d-md-block">
                        <h4>
                            <i class="material-icons">location_on</i>
                            Yellowstone National Park, United States
                        </h4>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100"
                         src="http://img.kiwipeach.cn/bg3.jpg"
                         alt="Second slide">
                    <div class="carousel-caption d-none d-md-block">
                        <h4>
                            <i class="material-icons">location_on</i>
                            Somewhere Beyond, United States
                        </h4>
                    </div>
                </div>
                <div class="carousel-item active">
                    <img class="d-block w-100"
                         src="http://img.kiwipeach.cn/bg3.jpg"
                         alt="Third slide">
                    <div class="carousel-caption d-none d-md-block">
                        <h4>
                            <i class="material-icons">location_on</i>
                            Yellowstone National Park, United States
                        </h4>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button"
               data-slide="prev">
                <i class="fa fa-chevron-left"></i>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button"
               data-slide="next">
                <i class="fa fa-chevron-right"></i>
            </a>
        </div>
    </div>
    <!--橱窗位置:end-->

    <!--友链部分:begin-->
    <div class="card">
        <h4 href="#" class="list-group-item" style="color: #0e0e0e">
            我的友链
        </h4>
        <div class="card-body friend-list">
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $.get('/sysParam/friendList', {}, function (res) {
                var $friendListContainer = $('.friend-list');
                $friendListContainer.empty();
                if (res.data) {
                    $.each(res.data, function (index, item) {
                        var $friendItem = $('<span class="badge badge-pill badge-dark" ><a href="' + item.url + '" target="_blank"class="text-white">' + item.label + '</a></span>');
                        $friendListContainer.append($friendItem);
                    });
                }
            });
        });
    </script>

    <!--友链部分:end-->
</div>

<!--#.右侧导航-系统头像-->
<div th:fragment="side_bar_profile" class="hidden-xs hidden-sm">
    <div class="card">
        <h4 href="#" class="list-group-item" style="color: #0e0e0e">
            用户信息
        </h4>
        <div class="card-body">
            <div th:id="user_login_div" class="tab-pane active" id="dashboard-1"
                 style="text-align: center">
                <!--登陆成功状态-->
                <!-- <img src="./assets/images/index/me-logo.png" alt="Thumbnail Image" class="img-raised rounded-circle img-fluid">欢迎您,KiWiPeach -->
                <!--未登录状态-->
                错误提示：请联系管理员
            </div>
        </div>
    </div>
    <script type="application/javascript">
        $.ajax({
            method: 'get',
            url: '/user',
            success: function (res) {
                var $content;
                if (res.code == '0' && res.data != null) {
                    $content = $('<div style="font-size: 20px;">' +
                        '<img src="' + res.data.headUrl + '"class="img-raised rounded-circle img-fluid" style="width: 60px;height: 60px;">' +
                        '<p>亲爱的 <span style="font-size: 18px;font-weight: bold">“' + res.data.nickName + '”</span>欢迎光临</p>' +
                        '<p><a href="javascript:;" onclick="logoutClick(this)"  data-toggle="tooltip" data-html="true" title="<b>欢迎您下次光临~~</b>">安全退出</a></p>' +
                        '</div><');
                } else {
                    //登陆注册按钮
                    $content = $('<button class="btn btn-primary btn-round" data-toggle="modal"data-target="#loginModal"><i class="fas fa-sign-in-alt fa-lg"></i> 登录 </button> ' +
                        '<button class="btn btn-primary btn-round" onclick="registerClick();"><i class="fa fa-registered fa-lg"></i> 注册 </button>');
                }
                $('#user_login_div').html($content);
            }
        });

        /*注册监听*/
        function registerClick() {
            toastr.info('用户注册功能暂未开放！');
        }

        /*退出监听*/
        function logoutClick(target) {
            window.location.href = '/user/logout?logoutUrl=' + encodeURIComponent(window.location.href);
        }
    </script>
</div>

<!--#.页面底部-->
<footer th:fragment="footer" class="footer ">
    <div class="container">
        <nav class="pull-left">
            <ul>
                <li>
                    <a href="https://gitee.com/kiwipeach" target="_blank">
                        博主Gitee
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        意见反馈
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        联系博主
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        友情链接
                    </a>
                </li>
            </ul>
        </nav>
        <div class="copyright pull-right" style="text-align: center">
            Copyright &copy;2018 |<a href="https://www.creative-tim.com" target="_blank" class="text-dark"> 刘卜铷的博客</a>
            |赣ICP备18004703号.
        </div>
    </div>
</footer>

<!--#.页面body需要加载的公共js-->
<div th:fragment="body_script">
    <!--/*fontawsome图标*/-->
    <!-- <script type="text/javascript" th:src="@{/assets/plugins/font-awesome/js/all.min.js}"></script>-->
    <!--/*aliyun fonticon base*/-->
    <script type="text/javascript" src="http://at.alicdn.com/t/font_1032912_vw8ub3a45wg.js"></script>
    <!--/*aliyun fonticon ext*/-->
    <script type="text/javascript" src="http://at.alicdn.com/t/font_1032873_28w9eh66h8l.js"></script>
    <!--/*前段框架依赖*/-->
    <script th:src="@{/assets/plugins/material-kit/assets/js/core/popper.min.js}"></script>
    <script th:src="@{/assets/plugins/material-kit/assets/js/bootstrap-material-design.min.js}"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
    <!-- <script th:src="@{/assets/plugins/material-kit/assets/js/plugins/bootstrap-datetimepicker.min.js}"></script>
     <script th:src="@{/assets/plugins/material-kit/assets/js/plugins/nouislider.min.js}"></script>-->
    <script src="https://cdn.bootcss.com/material-kit/2.0.4/js/material-kit.js"></script>
    <!--/*回到最顶端(totop)插件*/-->
    <script src="https://cdn.bootcss.com/jquery-easing/1.4.1/jquery.easing.min.js"></script>
    <script th:src="@{/assets/plugins/jquery_totop_plugin/js/jquery.ui.totop.min.js}" type="text/javascript"></script>
    <!--/*树形分类插件*/-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zTree.v3/3.5.23/js/jquery.ztree.core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zTree.v3/3.5.23/js/jquery.ztree.excheck.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zTree.v3/3.5.23/js/jquery.ztree.exedit.min.js"></script>
    <!--/*pace插件*/-->
    <script src="https://cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
    <!--/*博客toc目录插件*/-->
    <script src="https://cdn.bootcss.com/tocbot/4.7.0/tocbot.min.js"></script>
    <!--/*博客slimscroll滚动条插件*/-->
    <!--/*注册步骤插件*/-->
    <!-- <script type="text/javascript" th:src="@{/assets/plugins/smartwizard/dist/js/jquery.smartWizard.min.js}"></script>-->
    <!--/*sweetalert*/-->
    <script src="https://cdn.bootcss.com/sweetalert/2.1.2/sweetalert.min.js"></script>
    <!--/*pagination*/-->
    <script src="../../static/assets/plugins/jquery_pagination/jquery.pagination.js"
            th:src="@{/assets/plugins/jquery_pagination/jquery.pagination.js}"></script>
    <!--/*博客通用js*/-->
    <script type="text/javascript" th:src="@{/assets/js/blog-common.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/blog-util.js}"></script>
</div>

<!--#.对话框-->
<div th:fragment="modal_dialog">
    <!--登陆弹框-->
    <div id="loginModal" class="modal fade" role="">
        <div class="modal-dialog modal-lg modal-login" role="document">
            <div class="modal-content">
                <div class="card card-signup card-plain">
                    <div class="modal-header">
                        <div class="card-header card-header-primary text-center col-md-12">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i
                                    class="fas fa-times fa-sm"></i></button>
                            <h4 class="card-title">用户登陆</h4>
                            <div class="social-line" style="font-size: 30px;">
                                <a href="javascript:;" th:attr="data-url=@{/qq/login}" onclick="thirdLoginClick(this)"
                                   class="btn btn-just-icon btn-link">
                                    <svg class="alibaba-icon">
                                        <use xlink:href="#icon-QQ"></use>
                                    </svg>
                                </a>
                                <a href="javascript:;" th:attr="data-url=@{/github/login}"
                                   onclick="thirdLoginClick(this)" class="btn btn-just-icon btn-link">
                                    <svg class="alibaba-icon">
                                        <use xlink:href="#icon-GitHub"></use>
                                    </svg>
                                </a>
                                <a href="javascript:;" th:attr="data-url=@{/gitee/login}"
                                   onclick="thirdLoginClick(this)" class="btn btn-just-icon btn-link">
                                    <svg class="alibaba-icon">
                                        <use xlink:href="#icon-mayun"></use>
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                    <form id="loginForm" class="form" method="post" th:attr="action=@{/blog/user/login}">
                        <div class="modal-body">
                            <p class="description text-center" style="font-weight: bold">社交账号快速登陆</p>
                            <div class="card-body">
                                <div class="form-group bmd -form-group">
                                    <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="fas fa-envelope-square fa-lg"></i>
                                    </span>
                                        <input name="userName" type="text" required class="form-control"
                                               placeholder="邮箱/账号"
                                               value="">
                                    </div>
                                </div>
                                <div class="form-group bmd-form-group">
                                    <div class="input-group">
                                    <span class="input-group-addon">
                                       <i class="fas fa-lock fa-lg"></i>
                                    </span>
                                        <input name="password" type="password" required placeholder="请输入密码"
                                               class="form-control"
                                               value="">
                                    </div>
                                </div>
                                <div class="form-check">
                                    <label class="form-check-label">
                                        <input name="remember" class="form-check-input" type="checkbox" value="1">
                                        记住我？
                                        <span class="form-check-sign"><span class="check"></span></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer justify-content-center">
                            <button type="submit" class="btn btn-primary btn-round"
                                    style="margin-bottom: 30px;width: 300px;">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;陆
                            </button>
                        </div>
                    </form>
                    <script type="text/javascript"
                            th:src="@{/assets/plugins/jquery.form.js/dist/jquery.form.min.js}"></script>
                    <script type="text/javascript">

                        $("#loginForm").submit(function (e) {
                            e.preventDefault(); // prevent native submit
                            $(this).ajaxSubmit({
                                success: function (data) {
                                    window.location.reload();
                                }
                            });
                            return false;//阻止自动提交，必须return false;
                        })

                        /**
                         * 方法登录点击
                         */
                        function thirdLoginClick(target) {
                            var loginUrl = $(target).attr('data-url');
                            window.thirdLoginWindow = blog_util.openwindow({
                                url: loginUrl,
                                name: '三方登录窗口授权',
                                iWidth: 1200,
                                iHeight: 600
                            });
                        }
                    </script>
                </div>
            </div>
        </div>
    </div>
    <!--注册弹框-->
    <!--
        <div class="modal fade" id="signupModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="card card-signup card-plain">
                        <div class="modal-header">
                            <h5 class="modal-title card-title">Register</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <i class="material-icons">clear</i>
                            </button>
                        </div>
                        <div class="modal-body">
                            &lt;!&ndash;smartwizard begin&ndash;&gt;
                            <div id="smartwizard">
                                <ul>
                                    <li><a href="#step-1"><span style="font-size: 20px">1.快速注册</span><br/>
                                    </a></li>
                                    <li><a href="#step-2"><span style="font-size: 20px;color: #0e0e0e">2.邮件激活</span><br/>
                                    </a></li>
                                    <li><a href="#step-3"><span style="font-size: 20px;color: #0e0e0e">3.结果提示</span><br/>
                                    </a></li>
                                </ul>
                                <div>
                                    <div id="step-1" class="">
                                        <div>
                                            <form class="form" method="" action="">
                                                <div class="card-body">
                                                    <div class="form-group bmd-form-group">
                                                        <div class="input-group"><span class="input-group-addon"><i
                                                                class="material-icons">face</i></span><input type="text"
                                                                                                             class="form-control"
                                                                                                             placeholder="用户名">
                                                        </div>
                                                    </div>
                                                    <div class="form-group bmd-form-group">
                                                        <div class="input-group"><span class="input-group-addon"><i
                                                                class="material-icons">email</i></span><input type="text"
                                                                                                              class="form-control"
                                                                                                              placeholder="Email...">
                                                        </div>
                                                    </div>
                                                    <div class="form-group bmd-form-group">
                                                        <div class="input-group"><span class="input-group-addon"><i
                                                                class="material-icons">lock_outline</i></span><input
                                                                type="password" placeholder="输入密码" class="form-control">
                                                        </div>
                                                    </div>
                                                    <div class="form-check"><label class="form-check-label"><input
                                                            class="form-check-input" type="checkbox" value=""
                                                            checked=""><span
                                                            class="form-check-sign"><span class="check"></span></span>我同意该网站的所有条款<a
                                                            href="#something">内容</a>.</label></div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    <div id="step-2" class="">
                                        <div>
                                            <div class="alert alert-info">
                                                <div class="container">
                                                    <div class="alert-icon">
                                                        <i class="material-icons">info_outline</i>
                                                    </div>
                                                    一封邮件已经发往了您的邮箱[<span class="h4">1099501218@qq.com</span>]，请查收并激活。
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="step-3" class="">
                                        <div class="alert alert-success">
                                            <div class="container">
                                                <div class="alert-icon">
                                                    <i class="material-icons">check</i>
                                                </div>
                                                恭喜您，注册成功!!!
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            &lt;!&ndash;smartwizard end&ndash;&gt;
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="application/javascript">
            //注册步骤插件
            blog_common.plugin.smartwizard.init($('#smartwizard'));
            blog_common.plugin.smartwizard.event.bind_show_step($("#smartwizard"));
        </script>
    -->
</div>
</body>


</html>